document.write('<link rel="stylesheet" href="../assets/css/draw.css">');
export class Draw {
    constructor({ list, id }) {
      // console.log('id', id);
      // console.log('list',list.length);
      this.list = list;
      this.id = id;
      
      this.result = []; //抽奖结果数组
      this.top = 0;
      this.h = 0;
      this.ulTop = 0;
      this.init();
    }
    init(){ //初始化抽奖页面
      // 获取主元素
      const mainDiv = document.getElementById(this.id);
      // console.log('mainDiv',mainDiv)
      // 创建元素
      const conDiv = `
            <div class="container">
                <div class="num num1">
                    <ul></ul>
                </div>
                <div class="num num2">
                    <ul></ul>
                </div>
                <div class="num num3">
                    <ul></ul>
                </div>
            </div>
            `;
      mainDiv.innerHTML = conDiv;
      let ul = mainDiv.getElementsByTagName("ul");
      // console.log('ul',ul)
      this.list = (this.list).concat(this.list);
      // console.log('list1',this.list)
      let strLi = '';
      this.list.forEach(item => {
        strLi += `<li>
                        <img src="${item.src}" alt="" class="img">
                        <span class="txt">免佣券50元</span>
                    </li>`;
      });
      ul = [].slice.call(ul); //div转换为arry
      ul.forEach(function (item) {
        item.innerHTML = strLi;
      });
      this.getDiv();
      let top = this.top;
      //定位
      ul.forEach(function (item) {
        item.style.top = -top + "px";
      });
    }
    getDiv(){ // 获取高度
      const mainDiv = document.getElementById(this.id);
      let li = mainDiv.getElementsByTagName("li");
      let h = li[0].clientHeight || li[0].offsetHeight;
      let top = h * this.list.length / 2;
      let ulTop = h * this.list.length;
      this.h = h;
      this.top = top;
      this.ulTop = ulTop;
      console.log('top', this.top);
    }
    toDraw(result){ //抽奖
      // const _this = this;
      // console.log('result',result)
      let flag = false;
      if (!flag) {
        flag = true;
        let num1 = result[0] < (this.list.length / 2) ? result[0] - 1 + (this.list.length / 2) : result[0] - 1; //随机数
        let num2 = result[1] < (this.list.length / 2) ? result[1] - 1 + (this.list.length / 2) : result[1] - 1;
        let num3 = result[2] < (this.list.length / 2) ? result[2] - 1 + (this.list.length / 2) : result[2] - 1;
        console.log('num1:' + num1 + ",num2:" + num2 + ",num3:" + num3);
        const mainDiv = document.getElementById(this.id);
        let ul = mainDiv.getElementsByTagName("ul");
        // console.log("ul",ul);
        this.letGo(ul[0], num1);
        this.letGo(ul[1], num2);
        this.letGo(ul[2], num3);
      }

    }
    letGo(ul, scrollIndex, n){ // 转动
      const _this = this;
      // console.log(ul);
      let h = this.h;
      let top = this.top;
      let moveTop = -scrollIndex * h;
      // console.log("moveTop",moveTop)
      let index = 0; //转动次数
      var timer = setInterval(function () {
        index++;
        _this.animate(ul, "top", -top, function () {
          ul.style.top = "0";
        });
        // console.log("index:"+index)
        if (index >= 4) {
          clearInterval(timer);
          _this.animate(ul, "top", moveTop, function () { });
        }

      }, 100);
    }
    animate(obj, arr, target, fn){
      clearInterval(obj.timer);
      // const _this = this;
      let speed = 0;
      target = -target;
      // console.log('target',target)
      obj.timer = setInterval(function () {
        // let ulTop = _this.ulTop;
        speed = speed + 30;
        // console.log('speed',speed)
        if (speed >= target) {
          clearInterval(obj.timer);
          speed = target;
          obj.style.top = -speed + "px";
          // console.log('speed', speed);
          if (fn) {
            fn();
          }
        } else {
          // console.log('speed',speed)
          obj.style.top = -speed + "px";
        }
      }, 30);
    }

}   
    